<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="main" v-clock>
        <div v-for="(item,index) in list" class="lis">
            <div v-if="item.data - item.data1 >0">
                <img width="300" height="250" :src="item.image" alt="" srcset="">
                <div>{{item.name}}---{{item.price}}</div>
                <div>库存:{{item.data -list[index].data1}}</div>
                <input type="text" v-model="list[index].data1">
                <br/>
                <button @click="deleteCommodity(index)">删除商品</button>
            </div>
        </div>
        <button @click="addCommodity">新增商品</button>
    </div>
    <!--  继续商品列表,加个 新增和删除的按钮,新增点击后， -->
<!--  会自动加上最后一个商品.删除点击后，会自动减去最后一个商品 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data(){
            return{
                list:[
                    {id:0,data:100,data1:null,name:"菠萝",price:"5块钱一斤", image:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.alicdn.com%2Fi1%2F2833794928%2FO1CN01XEi8am1mH4Q0TWjuk_%21%212833794928.jpg&refer=http%3A%2F%2Fimg.alicdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1683794130&t=93bf810636ea7a549545b9e0880e9651"},
                    {id:1,data:100,data1:null,name:"苹果",price:"8块钱一斤",image:"https://img1.baidu.com/it/u=4256354021,131809293&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"},
                    {id:2,data:100,data1:null,name:"香蕉",price:"3块钱一斤",image:"https://img1.baidu.com/it/u=2988607387,3657044968&fm=253&fmt=auto&app=138&f=JPEG?w=397&h=243"}
                ]
            }
        },
     methods:{
        // 新增商品
        addCommodity(){
            let a=this.list
            a.push({id:a.length,data:100,data1:null,price:"2.5块钱一斤",name:"新鲜水果",image:"https://img2.baidu.com/it/u=1289871514,738452846&fm=253&fmt=auto&app=120&f=JPEG?w=350&h=350"})
            this.list=a
        },
        // 删除商品
        deleteCommodity(index){
            this.list.splice(index,1)
        }
     }
    }).mount("#main")
</script>
</body>
</html>